<template>
    <div>
        <el-card>
            <el-row>
                <!-- 下拉选择框 -->
                <el-col :span="4">
                    <el-select v-model="searchList.inEffective">
                        <el-option
                        v-for="item in useStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="2" :offset="2">
                    <el-button @click="addVersion"><i class="el-icon-plus"></i>添加新版本</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <el-table :data="searchVersionList" style="width: 100%" class="opinion" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column label="版本名称" prop="name" align="center"></el-table-column>
                <el-table-column label="版本号" prop="number" align="center"> </el-table-column>
                <el-table-column label="系统" prop="platform" align="center"> </el-table-column>
                <el-table-column label="添加时间" prop="expireTime" align="center"> </el-table-column>
                <el-table-column label="状态" prop="inEffective" align="center">
                    <template slot-scope="scope">
                            <p :class="{inuse:(scope.row.inEffective)}">{{ (scope.row.inEffective)?'有效':'禁用' }}</p>
                        </template>
                    </el-table-column>
                <el-table-column label="操作" align="center" min-width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleValid(scope.$index, scope.row)" :disabled="scope.row.inEffective ? false:true"><i class="el-icon-edit"></i>作废</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchList.page"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="searchList.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total=count
                align="center"
                small
                class="pagenation">
            </el-pagination>
            <!-- 作废模态框 -->
            <el-dialog
                title="提示"
                :visible.sync="invalidDialogVisible"
                width="30%">
                <span>确认作废？</span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="invalidDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="invalidHandler">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import {delHandler,getHandler2} from '../../http/content'
    export default {
        name: "Version",
        data(){
            return {
                //数据总数
                count:null,
                //作废模态框
                invalidDialogVisible:false,
                //搜索禁用处理状态
                useStatus: [
                    {
                        value: 2,
                        label: "全部",
                    },
                    {
                        value: 1,
                        label: "有效",
                    },
                    {
                        value: 0,
                        label: "禁用",
                    },
                ],
                //版本搜索参数
                searchList:{
                    page:1,
                    size:5,
                    inEffective:2
                },
                //获取的版本列表
                searchVersionList:[],
                //当前行id
                nowId:null,
            }
        },
        created(){
            this.searchVersion();
        },
        watch:{
            'searchList.inEffective':function(){
                this.searchVersion();
            }
        },
        methods:{
            //搜索版本
            searchVersion(){
                console.log(this.searchList);
                let path = '/version/selectAllAndEffective';
                getHandler2(path,this.searchList)
                    .then(res => {
                    console.log(res,'获取版本数据');
                    this.searchVersionList = res.data.data.result.agreement;
                    this.count = res.data.data.result.count;
                    })
                    .catch(err => {
                    console.log('请求失败', err);
                })    
            },
            // 分页大小改变
            handleSizeChange(newSize) {
                this.searchList.size = newSize;
                this.searchList.page = 1;
                console.log(this.searchVersionList,'分页大小改变请求参数');
                this.searchVersion();
            },
            //当前页改变
            handleCurrentChange(newSize) {
                this.searchList.page = newSize;
                console.log(this.searchVersionList,'当前页改变请求参数');
                this.searchVersion();
            },
            //作废处理
            handleValid(index,row){
                this.invalidDialogVisible = true;
                this.nowId = row.id;
            },
            //确认作废
            invalidHandler(){
                let path = '/version/updateinUse';
                console.log(this.nowId,'删除id');
                delHandler(path,this.nowId)
                .then(res => {
                    if(res.data.code != 20000) {
                        this.nowId = null;
                        return this.$message.error(res.data.message);
                    }
                    this.$message.success('作废成功');
                    this.nowId = null;
                    this.invalidDialogVisible = false;
                })
                .catch(err => {
                    this.$message.error(err);
                })
            },
            //添加新版本
            addVersion(){
                this.$router.push('/content/version/addversion');
                this.versionDialogStatus = false;
            },
        }
    }
</script>

<style scoped lang="less">
.el-table{
  margin-top: 20px;
}
.inuse {
  color: #009900;
}
// 分页
.pagenation{
    margin-top: 20px;
}
</style>